<script setup lang="ts">
import { useAppStore } from "@/store/modules/app.store";
const { bannerList } = useAppStore();

const status = ref<"loadmore" | "loading" | "nomore">("loadmore");
const dataList = ref<any[]>([]);

const activeIndex = ref(-1);

const search = ref({
  keywords: "",
  status: ""
});

const tagList = ref([
  {
    text: "全部",
    value: ""
  },
  {
    text: "未填报",
    value: "0"
  },
  {
    text: "已填报",
    value: "1"
  },
  {
    text: "待生产",
    value: "2"
  },
  {
    text: "已完成",
    value: "3"
  }
]);

const loadData = async () => {
  status.value = "loading";
  setTimeout(() => {
    for (let i = 0; i < 100; i++) {
      dataList.value.push({
        id: Date.now() + "_" + i,
        name: `订单${i}`,
        time: "2023-01-01 00:00",
        status: "待生产",
        phone: "13800000000"
      });
    }
    status.value = "loadmore";
  }, 500);
};

onReachBottom(() => {
  if (status.value === "loadmore") {
    loadData();
  }
});

const onOrderClick = (item: any, index: number) => {
  activeIndex.value = index;
  setTimeout(() => {
    activeIndex.value = -1;
  }, 300);
};

onMounted(() => {
  loadData();
});
</script>

<template>
  <view class="content">
    <view class="sp">
      <up-swiper
        height="350rpx"
        indicator
        bg-color="transparent"
        radius="10"
        :list="bannerList"
        name="url"
        mode="dot"
      ></up-swiper>
    </view>

    <view class="main">
      <up-sticky>
        <view class="search">
          <up-input v-model="search.keywords" placeholder="请输入姓名或手机号" @confirm="loadData">
            <template #suffix>
              <up-icon name="search" color="#dadbde" size="28" @click="loadData"></up-icon>
            </template>
          </up-input>
          <view class="tags">
            <view class="u-page__tag-item" v-for="item in tagList" :key="item.value">
              <up-tag
                :text="item.text"
                @click="search.status = item.value"
                border-color="#19be6b"
                :bg-color="item.value === search.status ? '#19be6b' : 'transparent'"
                :color="item.value === search.status ? '#fff' : '#19be6b'"
                padding="0 10px"
              ></up-tag>
            </view>
          </view>
        </view>
      </up-sticky>
      <view class="list">
        <view
          class="item"
          v-for="(item, index) in dataList"
          :key="item.id"
          @touchstart="onOrderClick(item, index)"
        >
          <view class="item__name">{{ item.name + " - " + item.phone }}</view>
          <view class="item__time">下单时间：{{ item.time }}</view>
          <view class="item__right">
            <view class="item__status">{{ item.status }}</view>
            <up-icon
              name="arrow-right"
              :color="activeIndex === index ? '#19be6b' : '#909399'"
              size="16"
            ></up-icon>
          </view>
        </view>
      </view>
      <up-loadmore :status="status" @loadmore="loadData" />
    </view>
  </view>
</template>
<style scoped lang="scss">
$active-color: #19be6b;
.content {
  background-color: #fff;
  min-height: 100vh;
  width: 100%;
  .sp {
    padding: 0 15rpx;
  }
  .main {
    padding-bottom: 10rpx;
    .search {
      padding: 10px 15rpx 0;
      background-color: #fff;
      .tags {
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0;
        .u-page__tag-item {
          & + .u-page__tag-item {
            margin-left: 5px;
          }
        }
      }
      border-bottom: 1rpx solid #dadbde;
    }
    .list {
      padding: 10rpx 15rpx;

      .item {
        padding: 20rpx 10rpx;
        border-bottom: 1rpx solid #dadbde;
        position: relative;
        background-color: #fff;
        transition: background-color 0.1s ease-in-out;
        &__name {
          font-size: 32rpx;
          margin-bottom: 15rpx;
          color: #333;
        }
        &__time {
          font-size: 28rpx;
          color: #909399;
        }
        .item__right {
          position: absolute;
          right: 0;
          top: 0;
          display: flex;
          height: 100%;
          align-items: center;
          .item__status {
            font-size: 28rpx;
            color: #909399;
            margin-right: 25rpx;
          }
        }
        &:active {
          background-color: #f5f5f5;
          .item__name {
            color: $active-color;
          }
          .item__time {
            color: $active-color;
          }
          .item__status {
            color: $active-color;
          }
        }
      }
    }
  }
}
</style>
